<template>
	<div id='addOrganization'>
		<div class="title">{{title}}</div>
		<div class="content">
      <Form ref="addForm" class="add-org-form" :model="addOrganizationModel" :rules="addOrganizationRule" :label-width="200" label-position="left">
        <Form-item label="Organization Name"  prop="orgName">
          <Input v-model="addOrganizationModel.orgName"></Input>
        </Form-item>
        <Form-item label="Abbreviation">
          <Input v-model="addOrganizationModel.orgShortName"></Input>
        </Form-item>
        <Form-item  v-if="$route.query.parentOrgId"    prop="parentOrgId">
          <Input  v-model="parentOrgName" icon="arrow-down-b" disabled="">
        </Form-item>
        <Form-item v-if="!$route.query.parentOrgId" label="Superior Organization" prop="parentOrgId" >
          <Dropdown  trigger="click" style="width: 100%" >
            <Input v-model="parentOrgName" icon="arrow-down-b" readonly>
            <Dropdown-menu slot="list">
              <el-tree
                class="filter-tree"
                :expand-on-click-node="false"
                :data="orgForm.children"
                :props="orgProps"
                default-expand-all
                @node-click="orgTreeClick"
              >
              </el-tree>
            </Dropdown-menu>
          </Dropdown>
        </Form-item>
        <Form-item label="Work Location">
          <Select v-model="addOrganizationModel.locationId" v-if="addOrganizationModel.locationId != 'add'" @on-change="workLocationChange" :label-in-value="true">
            <Option v-for="(item,key) in orgForm.companyAddressList" :key="key" :value="item.addressId">{{item.address}}</Option>
            <Option value="add">Add New</Option>
          </Select>
          <div v-if="addOrganizationModel.locationId == 'add'">
            <Row>
              <i-col span="12"><Input v-model="addWorkLocationModel"></Input></i-col>
              <i-col span="6" class="text-right"><button type="button" class="default-btn" style="width: 60px;height: 30px;font-size: 12px" @click="cancelSaveWorkLocation">cancel</button></i-col>
              <i-col span="6" class="text-right"><button type="button" class="default-btn active" style="width: 60px;height: 30px;font-size: 12px" @click="saveWorkLocation">save</button></i-col>
            </Row>
          </div>
        </Form-item>
        <Form-item label="Time Zone">
          <Select v-model="addOrganizationModel.timeZone">

          </Select>
        </Form-item>
        <Form-item label="Description">
          <Input v-model="addOrganizationModel.description"></Input>
        </Form-item>
        <!--<Form-item label="Organization ID">
          <Input v-model="addOrganizationModel.orgId"></Input>
        </Form-item>-->
        <Form-item label="status">
          <Select v-model="addOrganizationModel.status">
            <Option value="1">Active</Option>
            <Option value="2">InActive</Option>
          </Select>
        </Form-item>
      </Form>
      <div class="btn-group">
        <button v-touch-ripple @click="saveOrg(true)">Save and New</button> <button v-touch-ripple class="active" @click="saveOrg(false)">Save</button> <button v-touch-ripple @click="cancelSaveOrg">Cancel</button>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'addOrganization',
		components: {},
		created(){
		  this.init();
    },
		computed:{
		  orgForm(){
		      return this.$store.getters.orgFrom;
      }
    },
		watch:{
    },
		data () {
      var validateParentOrgId = (rule, value, callback) => {
        if (!value) {
          callback(new Error('superior organization is required'));
        } else {
          callback();
        }
      };
			return {
				title: 'Add Organization',
        addWorkLocationModel:'',
        orgProps:{
          children: 'children',
          label: 'orgName'
        },
        parentOrgName:'',
        addOrganizationModel:{
          orgName:null,
          orgShortName:null,
          parentOrgId:null,
          location:null,
          locationId:null,
          timeZone:null,
          timeZoneId:null,
          description:null,
          orgId:null,
          status:null,
        },
        addOrganizationRule:{
          parentOrgId: [
            { validator: validateParentOrgId, trigger: 'change',required:true },
          ],
          orgName: [
            { required: true, message: 'organization name is required', trigger: 'blur' },
          ],
        }
			}
		},
    methods:{
      init(){
        this.addOrganizationModel.parentOrgId = this.$route.query.parentOrgId;
        this.parentOrgName =  this.$route.query.parentOrgName;
        this.getForm();
      },
      getForm(){
        this.$store.dispatch('getOrgForm');
      },
      saveWorkLocation(){
        var address = this.addWorkLocationModel;
        if(!address){
          this.$Message.warning('address is required!');
          return;
        }
        this.$store.dispatch('saveAddress',{address:address}).then(
          ()=>{
            this.addOrganizationModel.locationId = '';
            this.$Message.success('add work Location success!')
          }
        );
      },
      cancelSaveWorkLocation(){

      },
      workLocationChange(data){
         this.addOrganizationModel.location = data.label;
      },
      orgTreeClick(data){
        this.addOrganizationModel.parentOrgId = data.orgId;
        this.parentOrgName = data.orgName;
      },
      saveOrg(isNew){
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            this.$store.dispatch('saveOrg',this.addOrganizationModel).then(
              ()=>{
                this.$Message.success('add Success');
                if(isNew){
                  this.$refs.addForm.resetFields();
                  this.getForm();
                }else{
                  this.$router.push('/views/org/company/orgChart');
                }
              }
            );
          }
        })
      },
      cancelSaveOrg(){
        this.$refs.addForm.resetFields();
        this.$router.push('/views/org/company/orgChart');
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#addOrganization {
    >.content{
      .add-org-form{
        width: 480px;
        margin:  80px  auto;
        .ivu-form-item-label{
          position: relative;
          font-size: 14px;
          &:before{
            position: absolute;
            right: 12px;
            font-size: 14px;
          }
        }
      }
      .btn-group{
        margin: 50px auto;
        text-align: center;
        button{
          width: 140px;
          height: 38px;
          border: 1px $baseBorderColor solid;
          outline: 0;
          font-size: 16px;
          color: #96ACB9;
          background-color: #fff;
          border-radius: 4px;
          margin-left: 10px;
          cursor: pointer;
          &:hover{
            opacity: .7;
          }
          &.active{
            background-color: $baseColor;
            color: #fff;
          }
        }
      }
    }
	}
</style>
